<template>
  <div class="container">
    <div class="error-box">
      <div class="error-code">
        <div>4</div>
        <div>0</div>
        <div class="code-zero">3</div>
      </div>
      <div class="error-desc">SORRY ! YOU HAVE NO PERMISSION TO VISIT</div>
      <div class="error-btns">
        <el-button type="primary" size="large" plain round @click="goHome">返回首页</el-button>
        <el-button type="primary" size="large" plain round @click="goBack">返回上一页</el-button>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    methods: {
      goHome() {
        this.$router.push('/');
      },
      goBack() {
        this.$router.go(-1);
      }
    }
  }
</script>
<style>
  .error-box {
    width: 50%;
    margin: 0px auto;
    /*background: #EEEEEE;*/
  }
  .error-code {
    width: 100%;
    display: flex;
    justify-content : center;
    margin-top: 120px;
  }
  .error-code div {
    margin: 30px 20px;
    text-align: center;
    font-size: 160px;
    font-weight: bold;
    color: #409EFF;
  }
  .error-code .code-zero {
    color: #67C23A;
    transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
  }
  .error-desc {
    text-align: center;
    font-size: 24px;
    color: #777;
  }
  .error-btns {
    text-align: center;
    margin: 30px 0px;
  }
  .error-btns .el-button {
    margin: 0px 30px;
  }
</style>
